<template>
  <div id="app">
    <el-row style="margin-bottom: 20px">
      <el-button @click="current = 'demo'">demo页</el-button>
      <el-button @click="current = 'config'">配置页</el-button>
      <el-button @click="current = 'pagelayout'">page布局</el-button>
    </el-row>
    <div v-if="current === 'demo'">
      <div>
        <el-button @click="updateManual">修改棋谱</el-button>
        <el-button @click="addManual">新增棋谱</el-button>
      </div>

      <grid-container :style="container" patient-base-id="5859">
        <div
          v-for="(item, i) in projects"
          :style="generateProjectStyle(item)"
          :key="i"
        >
          <ChessPiece :data="item.chessPiece" />
        </div>
      </grid-container>
    </div>
    <config v-else-if="current === 'config'" />
    <page-layout v-else-if="current === 'pagelayout'" :manualId="manualId" />
  </div>
</template>

<script>
import GridContainer from "@/components/GridContainer/index.vue";
import ChessPiece from "@/components/PageLayout/ChessPiece.vue";

import Config from "./components/Config";
import PageLayout from "@/components/PageLayout";

import {
  selectOptions,
  Container,
  createContainer,
  Project,
  createChessPieceSet,
  templateMap,
} from "@/data/index";
import { generateContainerStyle } from "@/utils/tools";

import { getManualById } from "@/api/jiugongge/index";

export default {
  name: "App",
  components: {
    GridContainer,
    Config,
    PageLayout,
    ChessPiece,
  },
  data() {
    return {
      selectOptions: selectOptions,
      templateMap: templateMap,
      current: "demo",
      pageData: null,
      projects: [],
      data: null,
      manualId: null,
    };
  },
  watch: {
    async current(value) {
      if (value === "demo") {
        await this.getManualById(1);
        this.initManual();
      }
    },
  },
  async created() {
    await this.getManualById(1);
    this.initManual();
  },
  methods: {
    generateProjectStyle({ colStart, colEnd, rowStart, rowEnd }) {
      console.log(colStart);
      return {
        "grid-column-start": colStart,
        "grid-column-end": colEnd,
        "grid-row-start": rowStart,
        "grid-row-end": rowEnd,
      };
    },

    async getManualById(manualId) {
      const res = await getManualById(manualId);
      this.data = res;
    },
    initManual() {
      const { chessBoard, chessPieceSets } = this.data;
      console.log(this.data);
      this.pageData = createContainer(chessBoard);

      this.projects = chessPieceSets.map((chessPieceSet) => {
        return createChessPieceSet(chessPieceSet);
      });
    },
    updateManual() {
      this.current = "pagelayout";
      this.manualId = 1;
    },
    addManual() {
      this.current = "pagelayout";
      this.manualId = null;
    },
  },
  computed: {
    container() {
      if (this.pageData) {
        let res = generateContainerStyle(this.pageData);
        return res;
      }
      return {};
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
